<template>
  <basic-container>
    <!-- 文件流程 -->
    <div class="main_title warn_f"><b>流程信息</b></div>
    <el-divider></el-divider>
    <div class="mb20">
      <span class="index_num warn_bg">1</span>
      <b>工作流+签名人员</b>
    </div>
    <table class="owntable wp100" v-if="guifanFilesProcessRecordList[0]">
      <tr>
        <th colspan="2">工作流流程顺序从上往下</th>
        <th>部门</th>
        <th>签名人员</th>
        <th>签名状态</th>
      </tr>
      <tr>
        <td class="white_bg" colspan="2">编制</td>
        <td class="white_bg">{{ guifanFilesProcessRecordList[0].createDeptName }}</td>
        <td class="white_bg">{{ guifanFilesProcessRecordList[0].createUserName }}</td>
        <td class="white_bg " :class="{ success_f: guifanFilesProcessRecordList[0].isSign == '1' }">{{ guifanFilesProcessRecordList[0].isSign == '1' ? '已签名' : '' }}</td>
      </tr>
      <tr>
        <td class="white_bg" colspan="2" :class="{ active: progressType == 1 }">审核</td>
        <td class="white_bg" :class="{ active: progressType == 1 }">{{ guifanFilesProcessRecordList[1].createDeptName }}</td>
        <td class="white_bg" :class="{ active: progressType == 1 }" :colspan="progressType == 1 ? 2 : 1">
          {{ guifanFilesProcessRecordList[1].createUserName }}{{ progressType == 1 ? '(您正处在这个位置)' : '' }}
        </td>

        <td class="white_bg" v-if="progressType != 1" :class="{ success_f: guifanFilesProcessRecordList[1].isSign == '1', active: progressType == 1 }">
          {{ guifanFilesProcessRecordList[1].isSign == '1' ? '已签名' : '' }}
        </td>
      </tr>

      <tr v-for="(item, i) in shenheNum - 3" :key="i">
        <td class="white_bg" :rowspan="shenheNum - 3" v-if="i == 0" :class="{ active: progressType == 3 }">{{guifanFilesProcessRecordList[i + 2].type==2?'评审':'记录责任人'}}</td>
        <td class="white_bg" :class="{ active: progressType == 3 && guifanFilesProcessRecordList[i + 2].userId == userInfo.user_id }">{{ i + 1 }}</td>
        <td class="white_bg" :class="{ active: progressType == 3 && guifanFilesProcessRecordList[i + 2].userId == userInfo.user_id }">
          {{ guifanFilesProcessRecordList[i + 2].createDeptName }}
        </td>
        <td
          class="white_bg"
          :colspan="progressType == 3 && guifanFilesProcessRecordList[i + 2].userId == userInfo.user_id ? 2 : 1"
          :class="{ active: progressType == 3 && guifanFilesProcessRecordList[i + 2].userId == userInfo.user_id }"
        >
          {{ guifanFilesProcessRecordList[i + 2].createUserName }}
          {{ progressType == 3 && guifanFilesProcessRecordList[i + 2].userId == userInfo.user_id ? '(您正处在这个位置)' : '' }}
        </td>
        <td
          class="white_bg "
          v-if="progressType== 3 && guifanFilesProcessRecordList[i + 2].userId != userInfo.user_id"
          :class="{ success_f: guifanFilesProcessRecordList[i + 2].isSign == '1' }"
        >
          {{ guifanFilesProcessRecordList[i + 2].isSign == '1' ? '已签名' : '' }}
        </td>
      </tr>
      <tr>
        <td class="white_bg" colspan="2" :class="{ active: progressType == 4 }">批准</td>
        <td class="white_bg" :class="{ active: progressType == 4 && guifanFilesProcessRecordList[shenheNum - 1].userId == userInfo.user_id }">{{ guifanFilesProcessRecordList[shenheNum - 1].createDeptName }}</td>
        <td class="white_bg" :class="{ active: progressType == 4 && guifanFilesProcessRecordList[shenheNum - 1].userId == userInfo.user_id }">{{ guifanFilesProcessRecordList[shenheNum - 1].createUserName }}</td>
        <td
          class="white_bg"
          :colspan="progressType == 4 && guifanFilesProcessRecordList[shenheNum - 1].userId == userInfo.user_id ? 2 : 1"
          :class="{ active: progressType == 4 && guifanFilesProcessRecordList[shenheNum - 1].userId == userInfo.user_id }"
        >
          <!-- {{ guifanFilesProcessRecordList[shenheNum - 1].createUserName }} -->
          {{ progressType == 4 && guifanFilesProcessRecordList[shenheNum - 1].userId == userInfo.user_id ? '(您正处在这个位置)' : '' }}
        </td>
        <td class="white_bg "
         v-if="progressType != 4 && guifanFilesProcessRecordList[shenheNum - 1].userId != userInfo.user_id"
         :class="{ success_f: guifanFilesProcessRecordList[shenheNum - 1].isSign == '1' }">
          {{ guifanFilesProcessRecordList[shenheNum - 1].isSign == '1' ? '已签名' : '' }}
        </td>
      </tr>
    </table>
  </basic-container>
</template>

<script>
  export default {
    props: {
      guifanFilesProcessRecordList: {
        type: Array,
        default() {
          return [];
        }
      },
      shenheNum: {
        type: [Number, String],
        default: 0
      },
      progressType:{
        type: [Number, String],
        default: 0
      }
    }
  }
</script>

<style scoped lang="scss">
  .active {
    background-color: #e6f1fc !important;
    color: #126bc9 !important;
  }
</style>
